<template>
  <a-card v-calcHeight="{ height: 21, dom: '.ant-card-body' }" title="SVG液晶数字字体">
    <div><digital :num="new Date(time).toFormat('YYYY-MM-DD hh:mm:ss')"></digital></div>
    <div><digital :num="'0123456789'"></digital></div>
    <div><digital :num="new Date(time).toFormat('YYYY-MM-DD hh:mm:ss')" shadow></digital></div>
    <div><digital :num="'0123456789'" shadow></digital></div>
    <div><digital1 :num="new Date(time).toFormat('YYYY-MM-DD hh:mm:ss')"></digital1></div>
    <div><digital1 :num="'0123456789'"></digital1></div>
    <div><digital1 :num="new Date(time).toFormat('YYYY-MM-DD hh:mm:ss')" shadow></digital1></div>
    <div><digital1 :num="'0123456789'" shadow></digital1></div>
  </a-card>
</template>

<script setup lang="jsx">
import { ref, onMounted, onBeforeUnmount } from 'vue'

const time = ref(Date.now())

let timer = ''

const running = () => {
  time.value = Date.now()
  timer = requestAnimationFrame(running)
}

onMounted(() => {
  timer = requestAnimationFrame(running)
})

onBeforeUnmount(() => {
  cancelAnimationFrame(timer)
})

const numPathInd = {
  '-': [3],
  0: [0, 1, 2, 4, 5, 6],
  1: [5, 6],
  2: [1, 2, 3, 4, 5],
  3: [2, 3, 4, 5, 6],
  4: [0, 3, 5, 6],
  5: [0, 2, 3, 4, 6],
  6: [0, 1, 2, 3, 4, 6],
  7: [2, 5, 6],
  8: [0, 1, 2, 3, 4, 5, 6],
  9: [0, 2, 3, 4, 5, 6]
}
const digital = ({ num, shadow }) => {
  shadow !== undefined && (shadow = true)
  const svgItem = path => (
    <svg viewBox="0 0 667 1024" xmlns="http://www.w3.org/2000/svg" width="0.651em" height="1em">
      {path}
    </svg>
  )
  const pathList = [
    // 左上
    'M168.64699648 438.77532017l-63.01871122 55.82224525-29.91811299-31.66071531c-13.29311689-13.55750495-22.382562-31.69806381-23.59442248-45.25655162-0.64377017-7.53653385 0.07567985-16.5876476 0.64377017-27.19167259l18.25457005-205.19068495c2.00699036-28.66792114 8.48204057-40.71182906 29.27434283-61.84419922l37.3416185-39.23558051 56.95940875 64.87532473-25.94246361 289.68183422z',
    // 左下
    'M129.10967941 883.8829308l-74.41884894 63.39711046-28.668904-34.72820645c-8.33166373-9.0520966-13.93688706-21.13335301-15.11041622-34.69085795-0.53074182-6.05930245 0.34006791-13.5584878 1.17352915-21.13237016l19.31507085-227.837635c2.68810903-21.13138731 8.74741149-37.75736627 21.28372986-49.76294281l51.61955632-48.28767711 51.39153391 52.7940683-26.58623378 300.24752788z',
    // 上
    'M217.04671908 129.51206133l-59.87554019-63.39711046 30.41052347-31.69904667C205.49718736 14.79909682 218.56228185 8.77812571 244.20202604 8.77812571h273.09418662c24.1625128 0 38.25075957 6.02195396 53.55086684 25.63876135l28.32785325 30.22279812-78.84857744 64.87335901H217.04770195z',
    // 中
    'M492.71696924 452.37115646l55.21680644 61.88253056-67.26071435 58.81405656 H180.38720213l-56.4669983-58.85238791 67.03367479-61.88253057 h301.76210777z',
    // 下
    'M452.9506469 894.48597296l60.55764174 70.93462717-30.82823694 27.1543241c-20.9053306 19.61779025-29.72940479 22.64695004-68.92665394 22.64695006 H161.7542328c-37.72001776 0-53.20981608-4.54472256-68.35758079-22.64695006l-23.36738292-25.6770927 81.19661855-72.41087572 H452.9506469z',
    // 右上
    'M536.98771707 147.57694034l77.33399753-64.87434187 25.10900239 28.66988686c10.11161453 12.08027355 15.67948937 24.16152995 16.73999016 36.20445501 0.64377017 7.53653385-0.18969105 15.0730677-0.90914108 24.16251281L636.81828778 392.00320579c-4.24102029 37.72001776-11.853234 54.34599671-32.87257577 72.44920708l-36.31846623 33.1752952-56.46699829-58.85337077 25.82845242-291.19641411z',
    // 右下
    'M497.44941714 592.68455098l67.14670315-60.32961931 33.21362655 34.69085796c9.96025483 10.56569365 15.6785065 24.12418146 17.00437821 39.23558052 0.79611273 9.01278239 0.07567985 18.1022275-0.53074182 28.668904l-19.69248724 223.2919296c-0.45506196 12.08125641-2.68909188 21.13237015-3.82527254 25.63876135-2.23402992 9.0520966-7.57486521 16.62597895-22.98898369 30.18348391l-37.72001774 34.72918931-58.47398865-64.91267322 25.86678377-291.19641412z'
  ]
  const numPath = num => {
    if (shadow) {
      return (
        <>
          <path d={pathList.join(' ')} opacity="0.2" />
          <path d={(numPathInd[num] || []).map(i => pathList[i]).join(' ')} />
        </>
      )
    }
    return <path d={(numPathInd[num] || []).map(i => pathList[i]).join(' ')} />
  }
  return `${num}`.split('').map(i => svgItem(numPath(i)))
}

const digital1 = ({ num, shadow }) => {
  shadow !== undefined && (shadow = true)
  const svgItem = path => (
    <svg viewBox="0 0 614.4 1024" xmlns="http://www.w3.org/2000/svg" width="0.6em" height="1em">
      {path}
    </svg>
  )
  const pathList = [
    'M19.04640003 108.10405925v352.11440989l41.4252247 41.42522469 41.42522469-41.42522469V108.10405925l-41.42522469-41.42522468z', // 左上
    'M19.04640003 563.78153086v352.11440989l41.4252247 41.42522468 41.42522469-41.42522468V563.78153086l-41.42522469-41.42522469z', // 左下
    'M112.25315559 14.8973037l-41.4252247 41.42522469 41.4252247 41.4252247h372.82702222l41.4252247-41.4252247-41.4252247-41.42522469z', // 上
    'M112.25315559 470.57477531l-41.4252247 41.42522469 41.4252247 41.42522469h372.82702222l41.4252247-41.42522469-41.4252247-41.42522469z', // 中
    'M112.25315559 926.25224691l-41.4252247 41.4252247 41.4252247 41.42522469h372.82702222l41.4252247-41.42522469-41.4252247-41.4252247z', // 下
    'M495.43648398 108.10405925v352.11440989l41.42522469 41.42522469 41.4252247-41.42522469V108.10405925l-41.4252247-41.42522468z', // 右上
    'M495.43648398 563.78153086v352.11440989l41.42522469 41.42522468 41.4252247-41.42522468V563.78153086l-41.4252247-41.42522469z' // 右下
  ]
  const numPath = num => {
    if (shadow) {
      return (
        <>
          <path d={pathList.join(' ')} opacity="0.2" />
          <path d={(numPathInd[num] || []).map(i => pathList[i]).join(' ')} />
        </>
      )
    }
    return <path d={(numPathInd[num] || []).map(i => pathList[i]).join(' ')} />
  }
  return `${num}`.split('').map(i => svgItem(numPath(i)))
}
</script>

<style scoped lang="scss">
.ant-card :deep(.ant-card-body) {
  font-size: 30px;
}
</style>
